<page-header title="{{'manage_single_pop'|translate}}">
  <ng-template #breadcrumb>
    <nz-breadcrumb>
      <nz-breadcrumb-item><a [routerLink]="['/pop/list']">{{'pop-list'|translate}}</a></nz-breadcrumb-item>
      <nz-breadcrumb-item>{{'manage_single_pop'|translate}}</nz-breadcrumb-item>
    </nz-breadcrumb>
  </ng-template>
  <ng-template #action><button nz-button (click)="back()"style="float: right"><i class="anticon anticon-rollback" style="font-size: 14px"></i>{{'goback'|translate}}</button></ng-template>
</page-header>
<nz-card [nzBordered]="false">
  <!--<nz-tabset [nzTabBarExtraContent]="extraTemplete" (nzSelectChange)="changeTabs($event)">-->
    <!--<nz-tab nzTitle="{{'all'|translate}}"></nz-tab>-->
    <!--<nz-tab nzTitle="{{'on_sale'|translate}}"></nz-tab>-->
    <!--<nz-tab nzTitle="{{'off_sale'|translate}}"></nz-tab>-->
  <!--</nz-tabset>-->
  <!--<ng-template #extraTemplete>-->
      <!--<button nzType="primary" nz-button style="margin-right: 10px" (click)="manuallyAddPopItem()"><span>{{'add-single-pop'|translate}}</span> <i class="anticon anticon-plus"></i></button>-->

    <!--<nz-upload [nzAction]="uploadExcelUrl" [nzShowUploadList]="false" nzAccept="application/vnd.ms-excel" (nzChange)="uploadProd($event)">-->
      <!--<button nzType="primary" nz-button style="margin-left: 10px"><span>{{'batch-import-single-pop'|translate}}</span><i class="anticon anticon-upload"></i></button>-->
    <!--</nz-upload>-->
  <!--</ng-template>-->
  <form nz-form [nzLayout]="'inline'" class="search__form">
    <nz-row [nzGutter]="8">
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="userGroup">SAP</nz-form-label>
          <nz-form-control>
            <input type="text" nz-input placeholder="{{'input_sap'|translate}}" [(ngModel)]="q.sap" name="sap">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="brand">SKU</nz-form-label>
          <nz-form-control>
            <input type="text" nz-input placeholder="{{'input_sku'|translate}}" [(ngModel)]="q.sku" name="sku">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="brand">{{'brand'|translate}}</nz-form-label>
          <nz-form-control>
            <nz-select nzPlaceHolder="{{'all_brands'|translate}}" nzAllowClear [(ngModel)]="q.brand" name="brand">
              <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="3" nzSm="24">
        <button nz-button type="button" [nzLoading]="loading" [nzType]="'primary'" class="mx-sm" (click)="st.load(1, q)">{{'search' | translate}}</button>
      </nz-col>
      <nz-col nzMd="3" nzSm="24">
      </nz-col>
      <nz-col nzMd="3" nzSm="24">
        <button nzType="primary" nz-button style="margin-right: 5px" (click)="manuallyAddPopItem()"><span>{{'add-single-pop'|translate}}</span> <i class="anticon anticon-plus"></i></button>
      </nz-col>
      <nz-col nzMd="3" nzSm="24">
        <nz-upload [nzAction]="uploadExcelUrl" [nzShowUploadList]="false" nzAccept="application/vnd.ms-excel" (nzChange)="uploadProd($event)">
          <button nzType="primary" nz-button style="margin-left: 5px"><span>{{'batch-import-single-pop'|translate}}</span><i class="anticon anticon-upload"></i></button>
        </nz-upload>
      </nz-col>
    </nz-row>
  </form>
</nz-card>
<!--<div class="d-flex align-items-center" style="margin-bottom: 8px">-->
  <!--<div>-->
    <!--<button nz-button nzType='default' style="margin-right: 8px" (click)="exportPop()"><i class="anticon anticon-export"></i>{{'batch-export-pop'|translate}}</button>-->
    <!--<button nz-button nzType='default' style="margin-right: 8px" (click)="showUpConfirm()"><i class="anticon anticon-up-circle-o"></i>{{'batch_on_sale'|translate}}</button>-->
    <!--<button nz-button nzType='default' style="margin-right: 8px" (click)="showDownConfirm()"><i class="anticon anticon-down-circle-o"></i>{{'batch_off_sale'|translate}}</button>-->
  <!--</div>-->
<!--</div>-->

<simple-table #st
              [data]="list"
              [extraParams]="q"
              [resReName]="{ total: 'data.total', list: 'data.rows'}"
              [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
              [columns]="columns"
              [showTotal]="true"
              [showPagination]="true"
              [showSizeChanger]="true"
              (checkboxChange)="checkboxChange($event)">
  <ng-template st-row="img" let-i>
    <span *ngIf="!i.img" style="color: lightgrey; font-size: 12px;">{{'no_image' | translate}}</span>
    <a><img *ngIf="i.img" (click)="showImage(imgSuffix + i.img)" [src]="imgSuffix + i.img" width="32px" style=" max-height: 32px;"/></a>
  </ng-template>
  <ng-template st-row="priceUnit" let-i let-index="index">
    <nz-tag [nzColor]="i.priceUnit === 'USD' ? 'green' : i.priceUnit === 'EUR' ? 'red': 'purple'">{{i.priceUnit | uppercase}}</nz-tag>
  </ng-template>
  <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
    <ng-template #modalContent>
      <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
    </ng-template>
  </nz-modal>
</simple-table>
